import React, { Component } from "react";
import { Modal, Button, Space, message, Tag, Switch } from 'antd';
import styles from './modal.module.css'
import { ExclamationCircleOutlined } from '@ant-design/icons';

export default class extends Component {
  constructor(){
    super();
    this.state ={
      visible: false
    }
  }

  ok = () => {
    message.success('城区信息编辑成功！');
    this.props.hideModal();
  };

  render() {
    const { visible, titles } = this.props
    return (
      <>
        <Modal
          title={titles.name+'信息'}
          visible={visible}
          onOk={this.ok}
          onCancel={this.props.hideModal}
          okText="确认"
          cancelText="取消"
        >
          <div className={styles.content}>
            <p><span style={{marginRight:10}}><span>城区名称</span>:</span>{titles.name}</p>
            <p><span style={{marginRight:10}}><span>面积</span>:</span>{titles.age}</p>
            <p><span style={{marginRight:10}}><span>区政府地址</span>:</span>{titles.address}</p>
            <p><span style={{marginRight:10}}><span>GDP排名</span>:</span>{titles.gdp}</p>
            <p><span style={{marginRight:10}}><span>城市化率</span>:</span>{titles.rate}</p>
            <p><span style={{marginRight:10}}><span>人口</span>:</span>{titles.people}</p>
            <p><span style={{marginRight:10}}><span>人口占比</span>:</span>{titles.peopleRate}</p>
            <p><span style={{marginRight:10}}><span>民生支出</span>:</span>{titles.live}</p>
            <p><span style={{marginRight:10}}><span>GDP增长率</span>:</span>{titles.upRate}</p>
            <p><span style={{marginRight:10}}><span>标签</span>:</span>{
                titles.tags > 1 ?
                <Tag color='#91caff' style={{textAlign:'center'}} >
                  风景特区
                </Tag>:
                <Tag color='#5cdbd3' style={{textAlign:'center'}} >
                  经济特区
                </Tag>
            }</p>
            <p><span style={{marginRight:10}}><span>数据状态</span>:</span><Switch checked={titles.status} /></p>
          </div>
        </Modal>
      </>
    );
  }
}
